<template>

	<view class="container">
		<view class="">
			<uniSegmentedControl :current="current" :values="itemType" @clickItem="onClickItem" styleType="text"
				active-color="#33D6A6" style="width: 235px;overflow: inherit;">
			</uniSegmentedControl>

			<view class="content">
				<view class="" v-show="current==0" v-for="(item,index) in infoList" :key='index'>
					<image :src="item.url" mode="" style="height: 251rpx;width: 100%;"></image>
					<view class="info_content">
						<view class="">
							<text style="width: 127rpx;display: inline-block;">地理位置 :</text>
							<text>{{item.position}}</text>
						</view>
						<view class="infoStyle">
							<text style="width: 127rpx;">工作时间 :</text>
							<view class="working">
								<text>{{item.time_from}}</text>
								<text>{{item.time_to}}</text>
							</view>

						</view>
						<view class="infoStyle">
							<text style="width: 127rpx;">部门介绍 :</text>
							<view class="textStyle"><text>{{item.introduce}}</text></view>
						</view>
					</view>
				</view>
				<view class="" v-show="current==1">
					<text>222</text>
				</view>
				<view class="" v-show="current==2">
					<text>333</text>
				</view>
			</view>
		</view>


		<view class="information ">
			<view style="margin-bottom: 80rpx; display: flex;align-items: center; justify-content: space-evenly;">
				<view style="width: 800rpx;">
					<!-- 此处使用uni-segmented-control组件需要下载     ：样式在组件样式中修改的 -->
					<qc-segmented-control :current="state" :values="items" @clickItem="_onclickTab" styleType="text"
						activeColor="#ffffff">
					</qc-segmented-control>
					<view class="information_content">
						<!-- 选项1的内容 -->
						<view class="listItem" v-show="state === 0">
							<!-- 选项卡1的每一个新闻 -->
							<view class="each_News" v-for="(item,index) in each_News" :key='index'>
								<view class="item-text">
									<view>{{item.title}}</view>
									<text>{{item.time}}</text>
								</view>
								<image :src="item.url"></image>
							</view>
						</view>
						<!-- F2 -->
						<view v-show="state === 1">
							<!-- 选项卡2的内容 -->
							<text>222</text>
						</view>
						<!-- F3 -->
						<view v-show="state === 2">
							<!-- 选项卡3的内容 -->
							<text>333</text>
						</view>

					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import uniSegmentedControl from '@/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'

	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				current: 0,
				itemType: ['民政', '农业', '残联'],
				infoList: [{
					url: '../../../static/image/video/BANNER.png',
					position: '位于XXX县XX镇XX村',
					time_from: '夏季 8:00-12:00 14:00-18:00',
					time_to: '冬季 8:30-12:00 14:00-17:30',
					introduce: '部门介绍信息部门介绍信息部门介绍信息部门介绍信息部门介绍信息部门介绍信息部门介绍信息部门介绍信息部门介绍信息部门介绍信息部门介绍信息部门介门介绍信息部门介绍信息部门介111111',
				}],
				state: 0,
				items: ['最新动态', '通知公告', '政策法规'],
				each_News: [{
					title: '中国.青川“阴平村”旅行散记',
					time: '2020-4-28 21:30',
					url: '../../../static/organize/organize_News_img.png'
				}, ]

			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			_onclickTab(e) {
				if (this.state != e.currentIndex) {
					this.state = e.currentIndex
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {

		padding: 0rpx 27.2rpx;

		.content {
			margin-top: 22rpx;

			.info_content {
				width: 100%;
				height: 318rpx;
				margin-top: 15rpx;
				line-height: 1.6;
				color: #9f9f9f;
				font-size: 25.4rpx;

				.infoStyle {
					display: flex;

					.working {
						display: flex;
						flex-flow: column;
					}

					.textStyle {
						width: 275px;
						height: 154.5rpx;
						overflow:hidden; //超出部分隐藏
						display:-webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 4;//在第几行加省略号
					}
				}

			}
		}

		// /deep/ .segmented-control__item {
		// 	justify-content: end;
		// }

		.information {
			margin-top: 16upx;

			.listItem {
				display: flex;
				background-color: #FFFFFF;
				padding: 10px 0px;
				border-radius: 12px;
				flex-flow: column;

				.each_News {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #F5F5F5;
					margin-bottom: 16rpx;

					image {
						width: 208rpx;
						height: 152rpx;
						margin-bottom: 16rpx;
					}

					.item-text {
						width: 400rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-bottom: 16rpx;

						text {
							color: #9F9F9F;
							font-size: 12px;
						}
					}

				}
			}

		}
	}
</style>
